import Taro from '@tarojs/taro'
import React, { useState } from 'react'
import { View, Image } from '@tarojs/components'
import './index.scss'
import { fieldImg } from '../imgList'

function Field({data, value = 0, onChange}) {

    const [startPoint, setStartPoint] = useState(value)

    function onTouchStart(e) {
        setStartPoint([e.touches[0].pageX,e.touches[0].pageY])
    }

    function onTouchMove(e) {
        let currentPoint = [e.touches[0].pageX,e.touches[0].pageY]
        if(currentPoint[0] > startPoint[0]) {
            console.log('move-right')
        }
        if(currentPoint[0] < startPoint[0]) {
            console.log('move-left')
        }
        setStartPoint(currentPoint)
    }

    function onTouchEnd(e) {
        console.log(e.touches,'onTouchEnd')
    }

    function handleSelect(index) {
        if(index == value) return
        if(onChange){
            onChange(index)
        }
    }
    
    let preIndex = value - 1, nextIndex = value + 1

    // if(preIndex < 0){
    //     preIndex = data.length - 1
    // }

    // if(nextIndex > data.length - 1){
    //     nextIndex = 0
    // }
    // console.log([preIndex,value,nextIndex])

    return <View className='fieldSelecter'>
            {
                data && data.map((item, index) => 
                    <View key={`${index}-c`} onClick={() =>handleSelect(index)} 
                        onTouchStart={onTouchStart}
                        onTouchMove={onTouchMove}
                        onTouchEnd={onTouchEnd}>
                        <Image
                        key={index} className={`item${value == index ? ' active' 
                        : (index == preIndex ? ' left' : index == nextIndex ? ' right' : ' hidden')}`} 
                        mode='aspectFit' src={fieldImg[item.size]}/>
                    </View>
                )
            }
        </View>
}

export default Field
